<template>
  <div class="container">
    <Title title="速城招聘网为您提供最及时的招聘信息"></Title>
    <!--<TabNav v-on:changetype="changetype">-->
    <!--</TabNav>-->
    <div class="tablenav-component">
      <div :class="{active:type == 0}" @click="changeType(0)" class="item normaltext" >全部</div>
      <block v-for="(item,index) in navlist" :key="index">
        <div :class="{active:item.id == type}" @click="changeType(item.id)" class="item normaltext" >{{item.name}}</div>
      </block>
    </div>

    <div class="job-ad">
      <image :src="banner" />
    </div>
    <JobList :needtext="false" :list="jobList"> </JobList>
    <div class="end-flag end-flag-loding" v-show="isLoading === true">正在加载中...</div>
    <div class="end-flag end-flag-isnext" v-show="isNext === false">已加载全部</div>

    <Contact> </Contact>

  </div>
</template>
<script>
  import Title from '@/components/Title'
  import JobList from '@/components/Index/JobList'
  import Contact from '@/components/contact'

  const app = getApp();
  const wxapp = app
  export default {
    data(){
      return {
        isLoading : false,
        isNext: true,
        type:'all',
        page: 1,
        banner: ''
      }
    },
    props: {
      jobList: {
        Object
      },
      navlist: {
        Object
      },
      banner: {
        String
      }
    },
    components:{
      Title,
      JobList,
      Contact
    },
  methods:{
    changeType(type){
      console.log(type);
      this.type = type;
      app.globalData.jobtype = type;
      this.jobList = []
      this.getList();
console.log(this.jobList)

    },
    getList() {
      wx.showLoading({
  title: '加载中',
})
      let that = this
      wx.request({
        url: wxapp.globalData.ROOT_URL, //仅为示例，并非真实的接口地址
        data: {
           siteid: '4' ,
           service: 'App.Hong.Index',
           page: that.page,
           table: '4_jobs',
           id: that.type,
           ftable: '4_jobs_category'
        },
        success: function(res) {
          wx.hideLoading()
          that.isLoading = false
          if(res.data.data.result == 0) {
            wx.showToast({
              title: '没有了',
              icon: 'success',
              duration: 2000
            })
            that.isNext = false
          }else {
            let list = res.data.data.result
            if(that.page >1) {
              let jobList = that.jobList
              for(let i in list) {
                jobList.push(list[i])
              }
              that.jobList = jobList
            }else {
              that.jobList = list
            }
          }

        }
      })
    }
  },

    mounted(){
      this.type = this.$root.$mp.query.type;
      // console.log(this.type);
      this.changeType(this.type)
    },
    onShow(){
      this.type = this.$root.$mp.query.type;
    },

    onReachBottom(){
      console.log('首页滑动到底部');
      if(this.isLoading == true || this.isNext != true){
        return;
      }
      this.isLoading = true;
      this.page += 1
      this.getList()
    }
  }
</script>
<style scoped>
  .job-ad{
    height: 274rpx;

  }
  .job-ad image{
    width: 100%;
    height: 274rpx;
  }
  .tablenav-component{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 95rpx;
    line-height: 95rpx;
    margin: 5rpx 0;
    background: #fff;
    width: 100%;
  }
  .tablenav-component .item{
    text-align: center;
    flex: 1;
  }
  .tablenav-component .active{
    color: #2197D8;
  }
</style>
